<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>你的 IP | 楠格</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="{{ .Host }} • IP 地址查询 &mdash; 查询IP信息的最佳工具。"
    />
    <link rel="icon" href="https://s.cdn.ink/image/others/favicon.ico" type="image/x-icon" />
    <link rel="canonical" href="https://s.cdn.ink/" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-d/pure/1.0.1/pure-min.css"
    />
    <link
      rel="stylesheet"
      href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-d/pure/1.0.1/grids-responsive-min.css"
    />

    {{ template "script.html" . }} {{ template "styles.html" . }}
  </head>
  <body>
    <div class="content">
      <div class="pure-g gutters center">
        <div class="pure-u-1 pure-u-md-2-3">
          <div class="l-box">
            <h1>你的 IP</h1>
            <p><code class="ip">{{ .IP }}</code></p>
            <p>
              查询 IP 信息的首选
            </p>
          </div>
        </div>
        <div class="pure-u-1 pure-u-md-1-3">
          {{ if .Sponsor }}
          <div class="l-box leafcloud-placement">
            <div class="pure-g">
              <div class="pure-u pure-u-md-1">
                <div class="leafcloud-logo">
                  <a href="https://www.nange.cn" target="_blank">
                    <img src="https://s.cdn.ink/image/others/star.png" style="width: 80px;">
                  </a>
                </div>
              </div>
              <div class="pure-u pure-u-md-1">
                <p>
                  本站由<br />
                  <a href="https://www.nange.cn">
                    楠格
                  </a>运营维护
                </p>
              </div>
            </div>
          </div>
          {{ end }}
        </div>
      </div>

      <div class="pure-g gutters center">
        <!-- COLUMN 1 -->
        <div class="pure-u-1 pure-u-md-1-2 col">
          <div class="l-box">
            <h2>IP 详细信息</h2>
            <table class="info-table">
              <tr>
                <th scope="row">IP 地址</th>
                <td>{{ .IP }}</td>
              </tr>
              <tr>
                <th scope="row">IP Decimal</th>
                <td>{{ .IPDecimal }}</td>
              </tr>
              {{ if .Country }}
              <tr>
                <th scope="row">地区</th>
                <td>{{ .Country }}</td>
              </tr>
              {{ end }} {{ if .CountryCode }}
              <tr>
                <th scope="row">地区代码</th>
                <td>{{ .CountryCode }}</td>
              </tr>
              {{ end }} {{ if .CountryEU }}
              <tr>
                <th scope="row">欧盟</th>
                <td>{{ .CountryEU }}</td>
              </tr>
              {{ end }} {{ if .RegionName }}
              <tr>
                <th scope="row">省/州</th>
                <td>{{ .RegionName }}</td>
              </tr>
              {{ end }} {{ if .RegionCode }}
              <tr>
                <th scope="row">省/州代码</th>
                <td>{{ .RegionCode }}</td>
              </tr>
              {{ end }} {{ if .MetroCode }}
              <tr>
                <th scope="row">都会代码</th>
                <td>{{ .MetroCode }}</td>
              </tr>
              {{ end }} {{ if .PostalCode }}
              <tr>
                <th scope="row">邮编</th>
                <td>{{ .PostalCode }}</td>
              </tr>
              {{ end }} {{ if .City }}
              <tr>
                <th scope="row">城市</th>
                <td>{{ .City }}</td>
              </tr>
              {{ end }} {{ if .Latitude }}
              <tr>
                <th scope="row">纬度</th>
                <td>{{ .Latitude }}</td>
              </tr>
              {{ end }} {{ if .Longitude }}
              <tr>
                <th scope="row">经度</th>
                <td>{{ .Longitude }}</td>
              </tr>
              {{ end }} {{ if .Timezone }}
              <tr>
                <th scope="row">时区</th>
                <td>{{ .Timezone }}</td>
              </tr>
              {{ end }} {{ if .ASN }}
              <tr>
                <th scope="row">ASN</th>
                <td>{{ .ASN }}</td>
              </tr>
              {{ end }} {{ if .ISP }}
              <tr>
                <th scope="row">服务商</th>
                <td>{{ .ISP }}</td>
              </tr>
              {{ end }} {{ if .ORG }}
              <tr>
                <th scope="row">所属组织</th>
                <td>{{ .ORG }}</td>
              </tr>
              {{ end }}{{ if .ConnectionType }}
              <tr>
                <th scope="row">连接类型</th>
                <td>{{ .ConnectionType }}</td>
              </tr>
              {{ end }}{{ if .Hostname }}
              <tr>
                <th scope="row">主机名</th>
                <td>{{ .Hostname }}</td>
              </tr>
              {{ end }} {{ if .UserAgent }} {{ if .UserAgent.Comment }}
              <tr>
                <th scope="row">User&nbsp;agent</th>
                <td>{{ .UserAgent.Product }}/{{ .UserAgent.Version }}</td>
              </tr>
              {{ end }} {{ if .UserAgent.Comment }}
              <tr>
                <th scope="row">User&nbsp;agent: Comment</th>
                <td>{{ .UserAgent.Comment }}</td>
              </tr>
              {{ end }} {{ if .UserAgent.RawValue }}
              <tr>
                <th scope="row">User&nbsp;agent: Raw</th>
                <td>{{ .UserAgent.RawValue }}</td>
              </tr>
              {{ end }} {{ end }}
            </table>
            {{ if .Country }}
            
            {{ end }}
          </div>
        </div>
        <!-- COLUMN 2 -->
        <div class="pure-u-1 pure-u-md-1-2">
          <div class="l-box">
            <h2>以命令行的方式使用</h2>
            <div class="pure-form">
              <!-- COMMAND WIDGET -->
              <div class="input-buttons">
                <button
                  name="ip"
                  class="pure-button widget-select"
                  onclick="changeInput(this.name, this)"
                >
                  ip
                </button>
                <button
                  name="country"
                  class="pure-button widget-select"
                  onclick="changeInput(this.name, this)"
                >
                  country
                </button>
                <button
                  name="region"
                  class="pure-button widget-select"
                  onclick="changeInput(this.name, this)"
                >
                  region
                </button>
                <button
                  name="city"
                  class="pure-button widget-select"
                  onclick="changeInput(this.name, this)"
                >
                  city
                </button>
                <button
                  name="asn"
                  class="pure-button widget-select"
                  onclick="changeInput(this.name, this)"
                >
                  asn
                </button>
                <button
                  name="isp"
                  class="pure-button widget-select"
                  onclick="changeInput(this.name, this)"
                >
                  isp
                </button>
                <button
                  name="org"
                  class="pure-button widget-select"
                  onclick="changeInput(this.name, this)"
                >
                  org
                </button>
                <button
                  name="json"
                  class="pure-button widget-select"
                  onclick="changeInput(this.name, this)"
                >
                  json
                </button>
                <button
                  name="port"
                  class="pure-button widget-select"
                  onclick="changeInput(this.name, this)"
                >
                  port
                </button>
                <input
                  id="portInput"
                  type="number"
                  min="1"
                  max="40000"
                  value="8080"
                  class="narrow-input pure-input"
                  placeholder="8080"
                  onchange="updatePort(this.value)"
                />
              </div>
              <div class="widgetbox input">
                <code id="command"></code>
              </div>
              <div id="output" class="widgetbox output"></div>

              <form class="pure-form input-buttons">
                <fieldset>
                  <label for="ipInput">
                    查询其它 IP（可选）
                    <input
                      id="ipInput"
                      class=""
                      type="text"
                      placeholder="输入 IP 查询"
                      onkeyup="updateIP(this.value)"
                    />
                  </label>
                  <button
                    type="button"
                    class="pure-button"
                    onclick="navigate()"
                  >
                    查询
                  </button>
                </fieldset>
              </form>
            </div>
            {{ if .Latitude }}
            <div class="pure-u-1 pure-u-md-1-1">
              <h2>地图</h2>
              <iframe
                width="100%"
                height="350"
                frameborder="0"
                scrolling="no"
                marginheight="0"
                marginwidth="0"
                src="https://www.openstreetmap.org/export/embed.html?bbox={{ .BoxLonLeft }}%2C{{ .BoxLatBottom }}%2C{{ .BoxLonRight }}%2C{{ .BoxLatTop }}&amp;layer=mapnik&amp;marker={{ .Latitude }}%2C{{ .Longitude }}"
              ></iframe>
            </div>
            {{ end }}
            <span>
              本站数据由<a href="https://www.maxmind.com" target="_blank">MaxMind</a>提供。
            </span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
